<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <div>
                <router-link
                    v-perms="['dynamic.live/liveInfo']"
                    :to="{
                                path: getRoutePath('dynamic.live/liveInfo')
                            }"
                >
                <el-button type="primary" class="mb-4">
                    <template #icon>
                    <icon name="el-icon-Plus"/>
                    </template>
                    添加计划
                </el-button>
                </router-link>
            </div>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号(ID)" prop="id" min-width="90"/>
                <el-table-column label="扬帆计划第几期" min-width="140" prop="num" />
                <el-table-column label="本期嘉宾" min-width="120" prop="guest" />
                <el-table-column label="直播开始时间" min-width="200" prop="start_time_str" />
                <el-table-column label="报名人数" min-width="120" prop="join_count">
                    <template #default="{row}">
                        <el-button type="primary" link @click="onEntry(row.id)">{{ row.join_count }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="直播回放" min-width="220" prop="playback" />
                <el-table-column label="状态" min-width="120" prop="status">
                     <template #default="{row}">
                            <span v-if="row.status == 3">已结束</span>
                            <span v-else-if="row.status == 2">直播中</span>
                            <span v-else>报名中</span>
                        </template>
                </el-table-column>
                <el-table-column label="操作" min-width="180">
                     <template #default="{row}">
                        <el-button v-perms="['dynamic.live/liveInfo']" type="primary" link >
                            <router-link :to="{ path: getRoutePath('dynamic.live/liveInfo'), query: { id: row.id  } }" > 编辑 </router-link>
                        </el-button>
                     </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists"/>
            </div>
        </el-card>

        <entryList ref="entry_list" />
    </div>
</template>
<script lang="ts" setup name="sail">
import { liveList } from '@/api/operation';
import { usePaging } from '@/hooks/usePaging'
import {getRoutePath} from '@/router'
import entryList from './entryList.vue'

const queryParams:any = reactive({
  
})
const {pager, getLists, resetPage, resetParams} = usePaging({
  fetchFun: liveList,
  params: queryParams
})
getLists()

const entry_list = ref()
const onEntry = (id:number) => {
    console.log(id)
    entry_list.value.init(id);
}

</script>